import React from 'react';
import * as SubjectStyle from './Subject.less';

function cx(selectedItems,ID){
	if (selectedItems.length==0){
		return
	}else{
		for (var i=0;i<selectedItems.length;i++){
			if (selectedItems[i]==ID){
				return 'checked';
			}
		}
	}
	
	return; 
};

export default class Subject extends React.Component {
	static propTypes = {
		name: React.PropTypes.string,
		onSelectSubject: React.PropTypes.func
	}

	constructor(props) {
		super(props);
	}
	//选择科目，并推入state
	handleChecked = (ID) => {
		let { onSelectSubject } = this.props;
		
		onSelectSubject&&onSelectSubject([ID])
	}
	//全选，清空可选项
	handleSelectAll = () => {
		let newArr = [];
		let { onSelectSubject } = this.props;
		onSelectSubject&&onSelectSubject(newArr)
	}
	render() {
		let { options, selectedItems} = this.props;

		let items = options.reduce((items,n,index) => {
			items.push(
				<li key={index} onClick={() => this.handleChecked(n.enum)}>
				<b className={cx(selectedItems,n.enum)}></b>
						<span>{n.name}</span>
					</li>)
			return items;
		},[]);	
		return (
			<div className={SubjectStyle.subject} options={options} selectedItems={selectedItems}>
				<ul>
				<li>科目 ：</li>
				<li onClick={this.handleSelectAll} ><span className={selectedItems.length==0?'selectedAll':'unselectedAll'}>全部</span></li>
					{items}
				</ul>
			</div>
		);
	}
};
